<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01.sharedWorker</title>
</head>
<body>
  <label for=""><input type="text" id="name" placeholder="请输入名称" disabled></label><br>
  <label for=""><input type="text" id="input" placeholder="请输入内容"><button id="btn" onclick="sendMsg()">提交</button></label>
  <ul id="ul">

  </ul>
  <!-- <script src="./01.sharedWorker.js"></script> -->
  <script>
    const btn = document.querySelector('#btn'),
          input = document.querySelector('#input'),
          name = document.querySelector('#name'),
          ul = document.querySelector('#ul');

    
    const randomName = Math.random().toString(36).substr(2,5).toLocaleUpperCase();
    name.value = randomName

    /**
     * 1. 无需通过 script 标签引用 sharedWorker 文件
     * 2. 可以通过 chrome://inspect/#workers 查看所有的 sharedWorker , 点击 inspect 进行调试, terminate 停止当前的 sharedWorker
    */
    // 创建一个 Shared Worker
    //  new SharedWorker(被共享的 SharedWork.js 文件URL, 表示worker的名字, 可选options)
    // ps: sharedWorker.js 文件需要同源；name 设置方便在 chrome://inspect/#workers 找到自己定义的 worker, 不同的 worker 不相通
    const sharedWorker = new SharedWorker('./01.sharedWorker.js', 'test', { name: name.value });
    
  
    // sharedWorker.port.start(); // 用处不明，有处说：如果对象使用 addEventListener 监听 message, 就要调用它：https://www.cnblogs.com/zoexu/p/16790215.html

    // 监听来自 Shared Worker 的消息
    sharedWorker.port.onmessage = (event) => {
      console.log(event.data) // 值来源都是 event.data
      // -------------------------------------------
      const {name: pageName, desc, time} = event.data
      const frag = document.createDocumentFragment();
      const li = document.createElement('li')
      li.innerHTML = `<span style="margin-right: 20px;">${pageName}：</span>${desc} <sup style="margin-left: 20px; color: #0011ff;">${time}</sup>`
      frag.appendChild(li);
      ul.appendChild(frag)
    }

    // 向 shared worker 发生消息
    // sharedWorker.port.postMessage('Hello form main page!')

    function sendMsg() {
      const time = new Date().toLocaleTimeString();
      const pageName = name.value;
      // const msg = `${pageName}：${input.value} -- time: ${time}`
      const msg = {
        name: pageName,
        desc: input.value,
        time
      }
      // -------------------------------
      // 发生消息，内容自定义，
      sharedWorker.port.postMessage(msg)
    }
    window.onbeforeunload = () => {
      sharedWorker.port.postMessage('close');
      // 关闭与共享线程的连接
      sharedWorker.port.close();
    }
  </script>
</body>
</html>